<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<style>
    body {
        font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #404040;
        margin: 0; /*去掉外边距*/
        background-image: url("imgs/login.jpg");
        background-size: cover; /*设置封面*/
        text-align: center; /*页面内部的文本居中*/
    }

    .sign-up {
        position: relative;
        margin: 180px auto;
        width: 280px;
        padding: 33px 25px 29px;
        background: white;
        border-bottom: 1px solid #c4c4c4;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    }

    .sign-up:before, .sign-up:after {
        content: '';
        position: absolute;
        bottom: 1px;
        left: 0;
        right: 0;
        height: 10px;
        background: inherit;
        border-bottom: 1px solid #d2d2d2;
        border-radius: 4px;
    }

    .sign-up:after {
        bottom: 3px;
        border-color: #dcdcdc;
    }

    .sign-up-title {
        margin: -25px -25px 25px;
        padding: 15px 25px;
        line-height: 35px;
        font-size: 26px;
        font-weight: 300;
        color: #aaa;
        text-align: center;
        text-shadow: 0 1px rgba(255, 255, 255, 0.75);
        background: #f7f7f7;
    }

    .sign-up-title:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 8px;
        background: #c4e17f;
        border-radius: 5px 5px 0 0;
        background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
        background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
        background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
        background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    }

    input {
        font-family: inherit;
        color: inherit;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .sign-up-input {
        width: 100%;
        height: 50px;
        margin-bottom: 25px;
        padding: 0 15px 2px;
        font-size: 17px;
        background: white;
        border: 2px solid #ebebeb;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 -2px #ebebeb;
        box-shadow: inset 0 -2px #ebebeb;
    }

    .sign-up-input:focus {
        border-color: #62c2e4;
        outline: none;
        -webkit-box-shadow: inset 0 -2px #62c2e4;
        box-shadow: inset 0 -2px #62c2e4;
    }

    .lt-ie9 .sign-up-input {
        line-height: 48px;
    }

    .sign-up-button {
        position: relative;
        vertical-align: top;
        width: 100%;
        height: 54px;
        padding: 0;
        font-size: 22px;
        color: white;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
        background: #f0776c;
        border: 0;
        border-bottom: 2px solid #d76b60;
        border-radius: 5px;
        cursor: pointer;
        -webkit-box-shadow: inset 0 -2px #d76b60;
        box-shadow: inset 0 -2px #d76b60;
    }

    .sign-up-button:active {
        top: 1px;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    :-moz-placeholder {
        color: #ccc;
        font-weight: 300;
    }

    ::-moz-placeholder {
        color: #ccc;
        opacity: 1;
        font-weight: 300;
    }

    ::-webkit-input-placeholder {
        color: #ccc;
        font-weight: 300;
    }

    :-ms-input-placeholder {
        color: #ccc;
        font-weight: 300;
    }

    ::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

</style>
<body>
<div class="sign-up">
    <div style="margin-bottom: auto">
        <img src="imgs/guozhenhao.jpg" width="150px" height="80px" alt="">
    </div>
    <h1 class="sign-up-title">欢迎来到果真好商城</h1>
    <input type="text" v-model="user.username" class="sign-up-input" placeholder="请输入用户名:" autofocus>
    <input type="password" v-model="user.password" class="sign-up-input" placeholder="请输入密码:">
    <input type="checkbox" v-model="user.rem">记住用户名和密码
    <input type="button" @click="login()" value="登录!" class="sign-up-button">
    <a href="UserReg.html">去注册</a>
</div>

</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            user: {
                username: '',
                password: '',
                code: '',
                rem: false
            }
        },
        methods: {
            login() {
                axios.post("/user/login", v.user).then(function (response) {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        //alert("登录成功,jwt=" + responseBody.data)
                        localStorage.setItem('jwt', responseBody.data);
                        if (v.user.rem) {
                            localStorage.setItem('username', v.user.username);
                            localStorage.setItem('password', v.user.password);
                        }
                        if (v.user.username == 'root') {
                            this.location.href = 'http://localhost:9000/sys-admin/';
                        } else {
                            this.location.href = '/index.html';
                        }
                    } else {
                        alert(responseBody.state);
                        this.$message.error(responseBody.message);
                    }
                })
            }
        },
        created: function () {
            this.user.username = localStorage.getItem("username");
            this.user.password = localStorage.getItem("password");
        }
    })
</script>

</html>
